<template>
  <div>
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item>
            <router-link to="/index">商品管理</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/users">用户管理</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/shop">结算中心</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/transaction">订单管理</router-link>
          </el-menu-item>
        </el-menu>
      </el-header>

      <el-main>
        <router-view/>
      </el-main>

    </el-container>

    <el-table :height="400"
              :data="tableData.filter(data => !search || data.g_name.toLowerCase().includes(search.toLowerCase()))"
              max-height="500"
              style="width: 100%">
      <el-table-column
        label="ID"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.g_id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.g_name }}</span>
        </template>
      </el-table-column>
      <!--      prop 绑定一列中要展示的值,这个值是后台传来json数据的值-->
      <el-table-column label="商品价格" prop="g_price">
      </el-table-column>
      <el-table-column label="商品数量" prop="g_count"></el-table-column>
      <el-table-column label="商品生产日期" prop="g_prodate"></el-table-column>
      <el-table-column label="商品过期日期" prop="g_expdate"></el-table-column>
      <el-table-column label="商品描述" prop="g_describe"></el-table-column>
      <el-table-column label="商品类型" prop="g_type"></el-table-column>
      <el-table-column label="" align="right">
        <!--        放入搜索框-->
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="请输入商品名称关键字搜索"/>
        </template>

        <template slot-scope="scope">
          <!--          scope.$index→拿到每一行的index-->

          <!--          scope.$row→拿到每一行的数据-->
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row);xiugai=true;tijiao=false">编辑
          </el-button>
          <!--          确认删除的气泡  点击确认的时候触发删除事件-->
          <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="确定删除当前商品吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button slot="reference"
                       size="mini"
                       type="danger"
                       :plain="true"
            >删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <div style="margin: 20px">
        <!--    一个添加按钮-->
        <el-divider></el-divider>
        <el-button type="success" size="mini" v-on:click="reset;tijiao=true;xiugai=false">添加</el-button>

        <el-button type="success" size="mini" v-on:click="findAllGoods">刷新</el-button>
      </div>
      <transition name="el-fade-in-linear">
        <div v-show="show" class="transition-box">
          <!--        label-suffix ：表单标签前缀  ref="userForm" 进行表单验证时传过去验证的表单，
          注意是在提交表单时传递给按钮的@click来作为提交的参数-->
          <el-form ref="goodsForm" :model="form" label-width="80px"
                   label-suffix=":"
                   :hide-required-asterisk="false"
                   :rules='rules'
          >
            <el-form-item label="商品编号" prop="g_id">
              <el-input v-model="form.g_id"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="g_name">
              <el-input v-model="form.g_name"></el-input>
            </el-form-item>
            <el-form-item label="商品单价" prop="g_price">
              <el-input v-model="form.g_price"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="g_count">
              <el-input v-model="form.g_count"></el-input>
            </el-form-item>
            <el-form-item label="生产日期" prop="g_prodate">
              <el-col :span="11">
                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.g_prodate"
                                style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="过期日期" prop="g_expdate">
              <el-col :span="11">
                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.g_expdate"
                                style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="商品描述" prop="g_describe">
              <el-input v-model="form.g_describe"></el-input>
            </el-form-item>
            <el-form-item label="商品类型" prop="g_type">
              <el-radio-group v-model="form.g_type">
                <el-radio label="服装"></el-radio>
                <el-radio label="食品"></el-radio>
                <el-radio label="电子产品"></el-radio>
                <el-radio label="日常用品"></el-radio>
                <el-radio label="其他"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveOne('goodsForm')" v-show="tijiao">提交</el-button>
              <el-button type="primary" @click="updateOne('goodsForm')" v-show="xiugai">修改</el-button>
              <el-button v-on:click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tijiao: true,
      xiugai: false,
      search: '',
      tableData: [],
      show: true,
      form: {
        g_id: '',
        g_name: '',
        g_price: '',
        g_count: '0',
        g_prodate: '',
        g_expdate: '',
        g_describe: '',
        g_type: ''
      },
      msg: '',
      status: Boolean,
      rules: {
        g_id: [
          // blur失去焦点触发
          {required: true, message: '请输入商品ID号码！', trigger: 'blur'}
        ],
        g_name: [
          // blur失去焦点触发
          {required: true, message: '请输入商品名称！', trigger: 'blur'}
        ],
        g_type: [
          // blur失去焦点触发
          {required: true, message: '请选择商品类型！', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 清空表单
    reset () {
      this.form = {g_count: '0'}
    },
    handleEdit (index, row) {
      // this.isShow()
      this.form = row // 点击编辑按钮，将数据返回到表单中
      console.log(index, row)
    },
    // 删除后提示信息
    openVn () {
      const h = this.$createElement
      this.$message({
        message: h('p', null, [
          h('span', null, '提示:'),
          h('i', {style: 'color: teal'}, this.msg)
        ]),
        type: 'success'
      })
    },
    findAllGoods () {
      this.axios.get('http://localhost:8989/goods/findAll').then(res => {
        console.log(res)
        this.tableData = res.data
      })
    },
    handleDelete (index, row) {
      // 使用路径加参数的形式get 来删除
      this.axios.get('http://localhost:8989/goods/deleteOneById?g_id=' + row.g_id).then(res => {
        this.result = res.data
        this.msg = this.result.msg
        console.log(this.result.msg)
        // 删除后提示消息
        this.openVn()
        this.findAllGoods()
      })
    },
    // 这个userForm是传进来进行表单验证的
    saveOne (goodsForm) {
      this.$refs[goodsForm].validate((valid) => {
        if (valid) {
          // 如果验证通过
          // 发送一个axios请求，使用post，把form表单传过去
          this.axios.post('http://localhost:8989/goods/saveOne', this.form).then(res => {
            // 接受到后台传来的json数据
            this.result = res.data
            // 提交后清空表单
            if (this.status === true) {
              this.reset()
            }
            // 刷新表单
            this.findAllGoods()

            // 在提交内容后弹出窗口提示
            this.$alert(this.result.msg, '提示信息', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `action: ${action}`
                })
              }
            })
          })
        } else {
          this.$message.error('输入的数据不合法')
        }
      })
    },
    updateOne (userForm) {
      this.$refs[userForm].validate((valid) => {
        if (valid) {
          // 如果验证通过
          // 发送一个axios请求，使用post，把form表单传过去
          this.axios.post('http://localhost:8989/goods/updateOneGoods', this.form).then(res => {
            // 接受到后台传来的json数据
            this.result = res.data
            // 提交后清空表单
            if (this.status === true) {
              this.reset()
            }
            // 刷新表单
            this.findAllGoods()

            // 在提交内容后弹出窗口提示
            this.$alert(this.result.msg, '提示信息', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `action: ${action}`
                })
              }
            })
          })
        } else {
          this.$message.error('输入的数据不合法')
        }
      })
    }
  },
  created () {
    this.findAllGoods()
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #4c7199;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #6a8aab;
}
</style>
